<!--
 * @Author: Aaron Huang
 * @Date: 2021-12-25 17:38:20
 * @LastEditors: Aaron
 * @LastEditTime: 2022-03-30 18:21:58
 * @Description: file content
 * @company: 沃尔玛
-->
<template>
  <div>
    <el-row :gutter="gutter">
      <el-col :span="24" class="head">商品信息</el-col>
      <el-col v-if="commodityAttribute.categoryName" :span="span" :xl="xl">
        <el-form-item label="平台分类" prop="categoryName">
          <el-input v-model="commodityAttribute.categoryName" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="span" :xl="xl">
        <el-form-item label="店铺分类" prop="storeCategoryName">
          <el-input v-model="commodityAttribute.storeCategoryName" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="span" :xl="xl">
        <el-form-item label="品牌名称" prop="channelBrandName">
          <el-input v-model="commodityAttribute.channelBrandName" disabled />
        </el-form-item>
      </el-col>
    </el-row>

    <channelAttribute
      :commodity-attribute="commodityAttribute"
      key-name="channelAttributeList"
      :span="span"
      :xl="xl"
      :is-disabled="isDisabled"
    />
  </div>
</template>

<script>
import channelAttribute from '@/views/coi/components/channelAttribute'

export default {
  name: 'ChannelAttribute',
  components: { channelAttribute },
  props: {
    commodityAttribute: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
    span: {
      type: Number,
      default: 12
    },
    xl: {
      type: Number,
      default: 8
    },
    gutter: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
i {
  vertical-align: middle;
  cursor: pointer;
  font-size: 16px;
  margin-left: 10px;
}
/deep/ .el-radio {
  line-height: 28px;
}
</style>
